import type { Meta, StoryObj } from '@storybook/react-vite';
import { MikuCard } from './MikuCard';
import { QqOutlined } from '@ant-design/icons';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Example/MikuCard',
  component: MikuCard,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  argTypes: {
    title: {
      description: '标题',
      type: 'string',
      defaultValue: '标题'
    },
    children: {
      description: '卡片内容',
      type: 'string',
      defaultValue: '测试内容'
    },
    extra: {
      description: '额外内容',
      type: 'string',
      defaultValue: '额外内容'
    },
    effects: {
      description: '特效开关',
      defaultValue: {
        glow: true,
        wave: true,
        hover: true
      }
    },
    style: {
      description: '样式(宽度等)',
    }
  }
} satisfies Meta<typeof MikuCard>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  parameters: {
    docs: {
      description: {
        story: '这是MikuCard组件的基础使用方式，通过设置width、title、children、extra属性来控制卡片的显示效果。'
      },
      source: {
        code: `
          <MikuCard 
            title={<div><QqOutlined /> 初音未来：ありがとう</div>}
            style={{width: 400}}
          >
            <p>悲しみの海に沈んだ私
              沉入悲伤之海的我
              目开けるをも亿劫
              连睁开眼睛都宛如永劫
              このままどこまでも堕ちて行き
              会就此堕坠到任何地方
              谁にも见つけられないのかな</p>
          </MikuCard>
        `
      },
    }
  },
  render: () => (
    <MikuCard 
      title={<div><QqOutlined /> 初音未来：ありがとう</div>}
      style={{width: 400}}
    >
      <p>悲しみの海に沈んだ私
        沉入悲伤之海的我
        目开けるをも亿劫
        连睁开眼睛都宛如永劫
        このままどこまでも堕ちて行き
        会就此堕坠到任何地方
        谁にも见つけられないのかな</p>
    </MikuCard>
  )
};

